<template>
	<view class="container">
		<view class="nav-controller">
			<view class="nav-controller-top">

			</view>
			<view class="nav-controller-title">
				小岩雾森Pro
			</view>
		</view>
		<view class="canvas-contorller">
			<canvas canvas-id="spray-canvas" style="margin: 0; padding: 0; width: 100%; height: 100%;"></canvas>
		</view>
		<!-- <uni-card :is-shadow="false">
			<button size="mini" @click="showCanvas">开始</button>
			<button size="mini" @click="stopCanvas">停止</button>
		</uni-card> -->
		<view class="controller-container">
			<view class="controller-container-hand">
				<view class="controller-container-hand-switch">
					<view class="">
						<switch :checked="plcControlParams.m32" @change="handleMode" />
						<view class="hand-text">手动模式</view>
					</view>
				</view>
				<view class="controller-container-hand-switch">
					<view class="">
						<switch :checked="plcControlParams.m33" @change="autoMode" />
						<view class="hand-text">自动模式</view>
					</view>
				</view>
			</view>
			<view class="controller-container-run">
				<image @click="startOrStopMachineV1" :src="startImgList[startImgIndex]" mode="">
				</image>
				<text v-if="startImgIndex === 0">启动</text>
				<text v-if="startImgIndex === 1">关闭</text>
			</view>
			<view class="controller-container-greed">
				<view class="greed-title">
					档位设置
				</view>
				<view class="greed-container">
					<view class="greed-container-item" v-for="(item,index) in 4" :key="index">
						<image v-if="runGeedIndex === item" :src="greedImageListSelect[index]"
							@click="setFrequencyV1(index)"></image>
						<image v-else :src="greedImageList[index]" @click="setFrequencyV1(index)"></image>
						<text class="greed-text">{{greedTextList[index]}}</text>
					</view>

				</view>
			</view>
			<view class="controller-container-timer" @click="gotoSetPage(setUrlList[0])">
				<view class="timer-img">
					<image :src="timerImageList[timerImageIndex]"></image>
					<text>定时</text>
				</view>
				<view class="timer-icon">
					<uni-icons type="right" size="30" color="#cdcdcd" ></uni-icons>
				</view>
			</view>
			<view class="controller-container-timer" @click="gotoSetPage(setUrlList[1])">
				<view class="timer-img">
					<image src="/static/controller/qw_select.png"></image>
					<text>驱蚊设置</text>
				</view>
				<view class="timer-icon">
					<uni-icons type="right" size="30" color="#cdcdcd"></uni-icons>
				</view>
			</view>
			<view class="controller-container-timer" @click="gotoSetPage(setUrlList[2])">
				<view class="timer-img">
					<image src="/static/controller/led_select.png"></image>
					<text>灯光</text>
				</view>
				<view class="timer-icon">
					<uni-icons type="right" size="30" color="#cdcdcd"></uni-icons>
				</view>
			</view>
			<view class="controller-container-timer" @click="gotoSetPage(setUrlList[3])">
				<view class="timer-img">
					<image src="/static/controller/hc_select.png"></image>
					<text>耗材</text>
				</view>
				<view class="timer-icon">
					<uni-icons type="right" size="30" color="#cdcdcd"></uni-icons>
				</view>
			</view>
			<view v-show="showHandSetFree" class="controller-container-handSetFree">
				<view class="setfree-text">
					设置频率
				</view>
				<view class="">
					<uni-row>
						<uni-col :span="16" :push="4">
							<view>
								<slider :value="plcControlParams.frequency" min="0" max="50" activeColor="#0f0"
									backgroundColor="#0f0f0f" block-color="#8A6DE9" block-size="20"
									show-value="true" @change="setFrequency" step="1" />
							</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="form-btn">
					<button type="warn" size="mini" @click="closeFreeWindow">关闭</button>
				</view>
			</view>
			<view v-show="showHandSetFree" @click="closeFreeWindow" class="controller-container-handSetFree-content">
			</view>
		</view>
		<!-- <uni-section title="手自动选择" subTitle="雾森主机只能是其中一种模式" type="line">
			<view class="view-auto-hand">
				<uni-row class="view-auto-hand-row" :gutter="0">
					<uni-col :span="8">
						<view class="view-auto-hand-row-view" style="">手动模式</view>
					</uni-col>
					<uni-col :push="4" :span="8">
						<switch :checked="plcControlParams.m32" @change="handleMode" />
					</uni-col>
				</uni-row>
				<uni-row class="view-auto-hand-row">
					<uni-col :span="8">
						<view class="view-auto-hand-row-view">自动模式</view>
					</uni-col>
					<uni-col :span="8" :push="4">
						<switch :checked="plcControlParams.m33" @change="autoMode" />
					</uni-col>
				</uni-row>
			</view>
		</uni-section>
		<uni-section title="频率设置" subTitle="建议频率35Hz" type="circle" style="margin-bottom: 20rpx;">
			<uni-row>
				<uni-col :span="16" :push="4">
					<view>
						<slider :value="plcControlParams.frequency" min="0" max="50" activeColor="#0f0"
							backgroundColor="#0f0f0f" block-color="#8A6DE9" block-size="20" show-value="true"
							@change="setFrequency" step="1" />
					</view>
				</uni-col>
			</uni-row>
		</uni-section>
		<uni-row>
			<uni-col :span="4" :push="10" class="view-switch-container">
				<view class="view-switch" @click="startOrStopMachine" :style="colorFlag ? color_start: ''">
				</view>
			</uni-col>
		</uni-row> -->

	</view>
</template>

<script>
	import api from "../../api/api.js"
	var ctx = null;
	export default {
		data() {
			return {
				colorFlag: false,
				color_start: "background-color: green;",
				hostidList: [],
				plcControlParams: {
					m32: false,
					m33: false,
					frequency: 35.0
				},
				intervalId: null,
				cwidth: 0,
				startImgList: ["/static/controller/stop.png", "/static/controller/run.png"],
				startImgIndex: 0,
				greedImageList: [
					"/static/controller/g1.png",
					"/static/controller/g2.png",
					"/static/controller/g3.png",
					"/static/controller/hand.png",
				],
				greedImageListSelect: [
					"/static/controller/g1_select.png",
					"/static/controller/g2_select.png",
					"/static/controller/g3_select.png",
					"/static/controller/hand_select.png",
				],
				greedTextList: [
					"一档",
					"二档",
					"三档",
					"手动",
				],
				runGeedIndex: 0,
				showHandSetFree: false,
				rundGeedIndexTemp: 0,
				timerImageList:[
					"/static/controller/timer.png",
					"/static/controller/timer_select.png",
				], 
				timerImageIndex: 1,
				setUrlList:[
					"/pages/settimer/settimer",
					"/pages/setQw/setQw",
					"/pages/setLed/setLed",
					"/pages/setHc/setHc",
				],

			}
		},
		onPullDownRefresh() {
			let timer = setTimeout(() => {
				api.readIndexParam({
					id: this.hostidList[0].id
				}).then(res => {
					if (res.code === 200) {
						this.plcControlParams.m32 = res.data.m32;
						this.plcControlParams.m33 = res.data.m33;
						this.plcControlParams.frequency = res.data.vd150;
					} else {
						this.showToast('none', res.msg);
					}
					// console.log("读取首页参数", res)
				})
				clearTimeout(timer);
				timer = null;
			}, 1000);
			uni.stopPullDownRefresh();
		},
		onShow() {
			let timer = setTimeout(() => {
				api.readIndexParam({
					id: this.hostidList[0].id
				}).then(res => {
					if (res.code === 200) {
						this.plcControlParams.m32 = res.data.m32;
						this.plcControlParams.m33 = res.data.m33;
						this.plcControlParams.frequency = res.data.vd150;
					} else {
						this.showToast('none', res.msg);
					}
					// console.log("读取首页参数", res)
				})
				clearTimeout(timer);
				timer = null;
			}, 500)
		},
		onLoad() {
			uni.getStorage({
				key: api.base.userHostList,
				success: res => {
					let ulist = []
					for (let i = 0; i < res.data.length; i++) {
						ulist[i] = res.data[i].id
					}
					this.hostidList = ulist;
				}
			})
			// this.showCanvas()
		},
		methods: {
			// 手动模式
			handleMode(e) {
				if (e.detail.value === true) {
					api.setHand({
						"ids": this.hostidList
					}).then(res => {
						// console.log("返回结果：",res);
						if (res.code === 200) {
							this.plcControlParams.m32 = res.data.m32;
							this.plcControlParams.m33 = res.data.m33;
						} else {
							this.showToast('none', res.msg);
						}

					})
				}
				this.stopCanvas();
			},
			// 自动模式
			autoMode(e) {
				if (e.detail.value === true) {
					api.setAuto({
						"ids": this.hostidList
					}).then(res => {
						// console.log("返回结果：",res);
						if (res.code === 200) {
							this.plcControlParams.m32 = res.data.m32;
							this.plcControlParams.m33 = res.data.m33;
						} else {
							this.showToast('none', res.msg);
						}

					})
				}
				this.showCanvas();
			},
			setFrequency(e) {
				let v = this.plcControlParams.frequency;
				// console.log('value 发生变化：' + e.detail.value)
				api.setFrequency({
					ids: this.hostidList,
					frequency: e.detail.value
				}).then(res => {
					if (res.code === 200) {
						this.plcControlParams.frequency = e.detail.value;
						this.showToast('none', res.msg);
					} else {
						this.plcControlParams.frequency = v;
						this.showToast('none', res.msg);
					}
				})
			},
			setFrequencyV1(index) {
				// console.log('index', index);
				// this.runGeedIndex = index + 1;
				this.rundGeedIndexTemp = this.runGeedIndex;
				if (index === 3) {
					this.showHandSetFree = true;
					this.runGeedIndex = 4;
				} else {
					let ff = 0.0;
					switch (index) {
						case 0:
							ff = 25.0
							break;
						case 1:
							ff = 35.0
							break;
						case 2:
							ff = 45.0
							break;
					}
					api.setFrequency({
						ids: this.hostidList,
						frequency: ff
					}).then(res => {
						if (res.code === 200) {
							this.runGeedIndex = index + 1;
							this.showToast('none', res.msg);
						} else {
							this.showToast('none', res.msg);
						}
					})
				}


			},
			closeFreeWindow() {
				this.showHandSetFree = false,
					this.runGeedIndex = this.rundGeedIndexTemp;
			},
			showToast(icon, msg) {
				uni.showToast({
					icon: icon,
					title: msg,
					duration: 1000,
					// backgroundColor: color, // 设置背景色为深灰色
					mask: true, // 是否显示遮罩
				})
			},
			startOrStopMachine() {
				this.colorFlag = !this.colorFlag;
				// console.log(this.colorFlag)
				if (this.colorFlag) {
					api.handStart({
						"ids": this.hostidList
					}).then(res => {
						// console.log(res)
						if (res.code === 200) {
							this.colorFlag = true
						} else {
							this.colorFlag = false;
							this.showToast('none', res.msg);
						}
					})
				} else {
					api.handStop({
						"ids": this.hostidList
					}).then(res => {
						if (res.code === 200) {
							this.colorFlag = false
						} else {
							this.colorFlag = true;
							this.showToast('none', res.msg);
						}
					})
				}

			},
			startOrStopMachineV1() {
				// this.colorFlag = !this.colorFlag;
				this.startImgIndex = this.startImgIndex === 0 ? 1 : 0;
				// console.log(this.colorFlag)
				if (this.startImgIndex === 1) {
					api.handStart({
						"ids": this.hostidList
					}).then(res => {
						// console.log(res)
						if (res.code === 200) {
							// this.colorFlag = true
							this.startImgIndex = 1;
						} else {
							// this.colorFlag = false;
							this.startImgIndex = 0;
							this.showToast('none', res.msg);
						}
					})
				} else {
					api.handStop({
						"ids": this.hostidList
					}).then(res => {
						if (res.code === 200) {
							// this.colorFlag = false
							this.startImgIndex = 0;
						} else {
							// this.colorFlag = true;
							this.startImgIndex = 1;
							this.showToast('none', res.msg);
						}
					})
				}

			},
			gotoSetPage(url){
				uni.navigateTo({
					// url: "/pages/settimer/settimer",
					url: url
				})
			},
			showCanvas() {
				ctx = uni.createCanvasContext("spray-canvas");

				uni.getSystemInfo({
					success: (res) => {
						this.cwidth = res.windowWidth;
					}
				})
				let numArr = Array(Math.floor(parseInt(this.cwidth / 10))).fill(300);
				let randNum = () => Math.random() > 0.5 ? 1 : 0;
				// console.log('randNum',randNum());
				if (!this.intervalId) {
					this.intervalId = setInterval(() => {
						// ctx.beginPath()
						// ctx.fillStyle = `rgba(0,0,0,0.1)`;
						// ctx.fillRect(0, 0, this.cwidth, 300);

						numArr.forEach((item, index) => {
							ctx.beginPath()
							ctx.fillStyle = '#0f0';
							ctx.fillText(randNum(), index * 10, item);
							numArr[index] = Math.random() < 0.02 ? 300 : item - 5;
						})
						ctx.draw()
					}, 50)
				}
			},

			stopCanvas() {
				if (this.intervalId) {
					clearInterval(this.intervalId);
					ctx.clearRect(0, 0, this.cwidth, 300);
					ctx.draw();
					this.intervalId = null;
				}
			}

		}
	}
</script>

<style lang="scss">
	.container {
		font-family: "微软雅黑";

		// 导航
		.nav-controller {
			height: 116px;
			margin: 0;
			padding: 0;
			background-color: #f17575;
			background-position: center;

			.nav-controller-top {
				height: 44px;
			}

			.nav-controller-title {
				margin: 0;
				height: 72px;
				font-size: 20px;
				color: #424242;
				text-align: center;
				line-height: 72px;
			}
		}

		// 效果图
		.canvas-contorller {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 300px;
			background-color: rgba(0, 0, 0, 0.1);
		}

		// 控制部分
		.controller-container {
			width: 100%;
			height: inherit;
			overflow: hidden;
			background-color: #f17575;

			// padding: 12rpx;
			%controller-container-perfix {
				border-radius: 8px;
				height: 72px;
				// border: 1px black solid;
				margin: 24rpx;
				background-color: #fff;
			}

			.controller-container-hand {
				@extend %controller-container-perfix;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-column-gap: 20rpx;
				background-color: #ddd;

				.controller-container-hand-switch {
					height: 72px;
					// border: #f17575 1px solid;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.hand-text {
						margin-top: 16rpx
					}

				}
			}

			.controller-container-run {
				@extend %controller-container-perfix;
				display: flex;
				align-items: center;

				image {
					width: 48px;
					height: 48px;
					margin-left: 30px;
				}

				text {
					font-size: 14px;
					font-weight: bold;
					margin-left: 30rpx;
				}
			}

			.controller-container-greed {
				@extend %controller-container-perfix;
				height: 128px;

				.greed-title {
					height: 26px;
					font-size: 14px;
					font-weight: bold;
					margin-left: 30rpx;


				}

				.greed-container {
					display: flex;
					justify-content: space-evenly;

					.greed-container-item {
						width: 48px;
						height: 78px;
						margin-top: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;

						image {
							width: 48px;
							height: 48px;
						}

						.greed-text {
							text-align: center;
							line-height: 24px;

						}
					}
				}

			}
			
			%text-controller{
				font-size: 14;
				font-weight: bold;
			}
			%icon-controller{
				display: flex;
				justify-content: right;
				align-items: center;
				margin-right: 20rpx;
			}

			.controller-container-timer {
				@extend %controller-container-perfix;
				@extend %text-controller;
				display: grid;
				grid-template-columns: repeat(2,1fr);
				grid-column-gap: 10rpx;
				.timer-img{
					display: flex;
					flex-direction: row;
					justify-content: left;
					align-items: center;
					image{
						margin-left: 30px;
						width: 48px;
						height: 48px;
					}
					text{
						margin-left: 30rpx;
					}
				}
				.timer-icon{
					@extend %icon-controller;
				}
			}

			.controller-container-led {
				@extend %controller-container-perfix;
				@extend %text-controller;
			}

			.controller-container-obj {
				@extend %controller-container-perfix;
				@extend %text-controller;
			}

			.controller-container-handSetFree {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 100;
				background-color: #fff;
				padding: 10px;
				border-radius: 10px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				width: 90%;
				
				.setfree-text {
					height: 26px;
					font-size: 14px;
					font-weight: bold;
					margin-left: 30rpx;
				}
				
				.form-btn {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}
			}
			// 蒙层
			.controller-container-handSetFree-content {
				position: fixed;
				top: 0;
				left: 0;
				z-index: 90;
				background-color: rgba(0, 0, 0, 0.6);
				// box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				width: 100%;
				height: 100%;
			}
		}
	}

	.view-auto-hand {
		.view-auto-hand-row {
			margin-bottom: 20rpx;

			.view-auto-hand-row-view {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 65rpx;
			}
		}
	}

	.view-switch-container {
		display: flex;
		justify-content: center;
		align-items: center;

		.view-switch {
			height: 100rpx;
			width: 100rpx;
			background-color: dimgray;
			border-radius: 50rpx;

		}
	}
</style>